import React, { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Switch, Route, } from "react-router-dom";
import './index.css';
import App from './App';
import NonPure from "./pages/different-class/NonPure";
import HasPure from "./pages/different-class/HasPure";
import LifeParent from "./pages/lifecycle/LifeParent";
import Other from "./pages/Other";
import CloneElement from "./pages/Other/components/cloneElement";
import IsValidElement from "./pages/Other/components/isValidElement";
import Children from "./pages/Other/components/children";
import ForwardRef from "./pages/Other/components/forwardRef";
import StudyRedux from "./pages/study-redux";
import reportWebVitals from './reportWebVitals';

const Lazy = lazy(() => import("./pages/Other/components/lazy"));

ReactDOM.render(
     <>
      <Router>
        <Suspense fallback={<div>loading ...</div>}>
          <Switch>
            <Route exact path = "/" component = { App } />
            <Route exact path = "/different-class-nonPure" component = { NonPure } />
            <Route exact path = "/different-class-hasPure" component = { HasPure } />
            <Route exact path = "/lifecycle" component = { LifeParent } />
            <Route exact path = "/studyRedux" component = { StudyRedux } />
            <Route exact path = "/other" component = { Other } />
            <Route exact path = "/other/test-cloneElement" component = { CloneElement } />
            <Route exact path = "/other/test-isValidElement" component = { IsValidElement } />
            <Route exact path = "/other/test-children" component = { Children } />
            <Route exact path = "/other/test-forwardRef" component = { ForwardRef } />
            <Route exact path = "/other/test-lazy" component = { Lazy } />
          </Switch>
        </Suspense>
      </Router>
     </>
  ,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
